<template>
  <div style="    margin-top: 20px;margin-left: 20px;">
    <h1 style="color: ;">时间日期管理</h1>
  </div>
  <el-breadcrumb :separator-icon="ArrowRight" style="margin-top: 15px;margin-left: 30px;">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>时间日期管理</el-breadcrumb-item>
  </el-breadcrumb>
   <el-calendar ref="calendar">
    <template #header="{ date }" >
      <span style="margin-left: 600px;">{{ date }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-year')"
          >上一年</el-button
        >
        <el-button size="small" @click="selectDate('prev-month')"
          >上一月</el-button
        >
        <el-button size="small" @click="selectDate('today')">跳转至今天</el-button>
        <el-button size="small" @click="selectDate('next-month')"
          >下一月</el-button
        >
        <el-button size="small" @click="selectDate('next-year')"
          >下一年</el-button
        >
      </el-button-group>
    </template>
  </el-calendar>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { ref } from 'vue'

const calendar = ref()
const selectDate = (val: string) => {
  calendar.value.selectDate(val)
}
</script>

<style scoped>

</style>